<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale-1,user-scalable=no" >
    <title>登陆</title>
    {load href='__PUBLIC__/static/js/jquery-3.1.1.min.js'}
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
    <div class="loginBox center container">
        <form action="{:url('filemanage/login/login')}" method="POST">
            <div class="col-lg-10 col-lg-offset-1">
                <h4>欢迎登录文件管理系统</h4>
            </div>
            <div class="form-group col-lg-10 col-lg-offset-1">
                <label for="">账号</label>
                <input type="text" name="username" class="form-control" placeholder="请输入账号">
            </div>
            <div class="form-group col-lg-10 col-lg-offset-1">
                <label for="">密码</label>
                <input type="password" name="password" class="form-control" placeholder="请输入密码">
            </div>
            <div class="form-group col-lg-10 col-lg-offset-1">
                <label for="">验证码</label>
                <div class="input-group">
                    <input type="text" name="captcha" class="form-control" placeholder="请输入验证码">
                    <span class="input-group-addon" style="padding:0;">
                        <img id="captcha-img" alt="验证码" class="img-rounded" src="{:captcha_src()}" onclick="refreshVerify()" />
                    </span>    
                </div>
            </div>
            <div class="col-lg-10 col-lg-offset-1">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="autoFlag" value="1"> 记住我(7天内自动登录)
                    </label>
                </div>
            </div>
            <div class="col-lg-10 col-lg-offset-1">
                <button class="btn btn-primary " type="submit" >登录</button>
                <a href="{:url('login/register')}"><button class="btn btn-danger" type="button" >注册</button></a>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        function refreshVerify() {
            var ts = Date.parse(new Date())/1000;
            var img = document.getElementById('captcha-img');
            img.src = "http://test.com/playground_tp5/public/captcha.html?id="+ts;
        }
    </script>

    <style>
        body{
            background: url(http://test.com/playground_tp5/public/static/picture/bg1.jpg) no-repeat center fixed;
            background-size: cover;
        }
        .loginBox{
            width: 400px;
            padding: 20px 0;
            background-color: #E8E8E8;
            border-radius: 10px;
        }
        .center {
            position: fixed;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
        }
    </style>